<template>
  <div>
    <div id="map" style="width: 80%; height: 700px;margin:0 auto;"></div>
    <div class="tittle_all">
      路线规划
    </div>
    <div class="Luxian">
      <div v-for="item in list" :key="item" class="luxian_box">
        <h1>{{item.name}}</h1>
        <div>
          <el-rate v-model="item.num" />
        </div>
        <div class="box_time">{{item.time}}</div>
        <div class="box_yuan">{{item.yuan}}</div>
        <div class="box_msg">{{item.msg}}</div>

      </div>
    </div>
    <div style="width: 100%;margin: 50px auto;  text-align: center;">
      <el-button type="success" round size="large">确认路线</el-button>
    </div>
  </div>
</template>
  <script lang="js" setup>   
    import {onMounted, reactive} from 'vue' 
    // import { Search } from '@element-plus/icons-vue'
    onMounted(() => {
      // 确保百度地图API脚本已加载
      const BMap = window.BMap;
      const map = new BMap.Map("map"); // 创建Map实例
      const point = new BMap.Point(116.404, 39.915); // 创建点坐标
      map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    });

    const list = reactive([
     {
        name: '方案一',
        num: 2,
        time: '30分钟',
        msg: '当前线路较远',
        yuan: '4.4公里'
      },
      {
        name: '方案一',
        num: 4,
        time: '20分钟',
        msg: '当前线路较远',
        yuan: '3.4公里'
      },

      {
        name: '方案一',
        num: 5,
        time: '10分钟',
        msg: '当前线路最佳',
        yuan: '1.4公里'
      },
    ])


  </script>   
<style lang="less" scoped>
  .bm-view {
    width: 100%;
    height: 80%;
  }
  .box_input {
    display: flex;
    align-content: center;
  }
  .Luxian {
    display: flex;
    width: 30%;
    margin: 0 auto;
    justify-content: space-around;
    .luxian_box {
      // width: 300px;
      // height: 400px;
      // background-color: red;
      border: 1px solid green;
      padding: 20px;
      border-radius: 20px;
      .box_time {
        font-weight: 700;
        font-size: 20px;

      }
    }
  }

</style>